<template>
  {{ d.num.toFixed(0) }}

</template>

<script setup>
import { reactive, watch } from 'vue'
import gsap from 'gsap'

const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
})

const d = reactive({
  num: 0
})

// 动画方法
function AnimateToValue() {
  gsap.to(d, {
    duration: 0.5,
    num: props.value
  })
}

// 调用动画方法
AnimateToValue()

// 检测值发生变化,重新调用动画方法
watch(() => props.value, () => AnimateToValue())

</script>

<style lang="scss" scoped>

</style>